# Alt Text (대체 텍스트)

## 개요

**Alt Text**(Alternate Text, 대체 텍스트)는 웹 페이지의 이미지나 멀티미디어 콘텐츠에 대한 텍스트 기반 설명입니다. 웹 표준(W3C)에서 권장하는 접근성(Accessibility)의 핵심 요소 중 하나로, 시각 장애인이 스크린 리더(Screen Reader)를 사용할 때 이미지의 내용을 인지할 수 있도록 하거나, 이미지가 로드되지 않았을 때 사용자에게 대체 정보를 제공하는 역할을 합니다. HTML의 `<img>` 태그에서 `alt` 속성을 통해 구현됩니다.

단순히 이미지의 파일 이름이나 장식적인 설명을 나열하는 것을 넘어, 검색 엔진 최적화(SEO)와 사용자 경험(UX) 향상에도 중요한 영향을 미치는 기술적 요소입니다.

## 주요 목적과 기능

Alt Text는 다음과 같은 세 가지 주요 목적을 위해 사용됩니다.

1.  **접근성(Accessibility)**: 시각 장애가 있거나 네트워크 환경이 좋지 않아 이미지를 볼 수 없는 사용자에게 콘텐츠의 의미를 전달합니다. 스크린 리더는 `alt` 속성의 텍스트를 음성으로 읽어줍니다.
2.  **검색 엔진 최적화(SEO)**: 구글(Google)과 같은 검색 엔진 봇은 이미지의 내용을 직접 '보는' 것이 불가능합니다. 따라서 이미지의 `alt` 텍스트를 분석하여 이미지의 주제와 관련성을 파악하고, 검색 결과의 관련성을 높이는 데 활용합니다.
3.  **사용자 경험(UX) 및 오류 처리**: 이미지가 로드되지 않거나, 브라우저 설정에 따라 이미지가 비활성화된 경우, `alt` 텍스트가 이미지 대신 표시되어 사용자에게 해당 공간에 어떤 콘텐츠가 존재했는지 알려줍니다.

## 올바른 Alt Text 작성 가이드라인

효과적인 Alt Text를 작성하기 위해서는 이미지의 성격과 웹 페이지에서의 역할을 고려해야 합니다.

### 1. 정보성 이미지 (Informative Images)
이미지 자체가 정보를 전달하는 경우(예: 차트, 지도, 제품 사진, 인물 사진 등)에는 이미지의 내용을 명확하고 간결하게 설명해야 합니다.

*   **원칙**: "무엇이 보이는가"를 설명하되, 불필요한 수식어는 피합니다.
*   **예시**:
    *   나쁜 예: `alt="사진"`
    *   좋은 예: `alt="2023년 매출 성장을 보여주는 상승 추세 차트"`

### 2. 장식성 이미지 (Decorative Images)
이미지가 콘텐츠의 이해에 필수적이지 않고, 단순히 디자인적 목적이나 여백 채우기 위해 사용되는 경우입니다.

*   **원칙**: 스크린 리더가 이 이미지를 읽지 않도록 해야 하므로, `alt` 속성을 비워두거나 공백 문자(`""`)를 사용합니다.
*   **코드 예시**:
    ```html
    <!-- 장식용 이미지: 스크린 리더가 무시함 -->
    <img src="divider-line.png" alt="">
    ```

### 3. 링크 내 이미지 (Images as Links)
이미지가 하이퍼링크의 역할을 하는 경우입니다.

*   **원칙**: 이미지가 아닌, 링크가 수행하는 **동작이나 목적**을 설명해야 합니다.
*   **예시**:
    *   나쁜 예: `alt="logo.png"` (파일 이름은 의미가 없음)
    *   좋은 예: `alt="회사 홈페이지로 이동"`

### 4. 복잡한 차트 및 그래프
단순한 설명으로는 전달하기 어려운 복잡한 데이터 시각화의 경우, `alt` 속성에는 핵심 결론이나 요약만 포함하고, 상세한 데이터는 `<figure>` 태그와 `<figcaption>` 태그, 또는 `aria-describedby` 속성을 통해 별도 텍스트로 제공해야 합니다.

## SEO와의 관계

검색 엔진은 이미지 검색(Image Search) 결과뿐만 아니라 일반 웹 검색 결과에서도 Alt Text를 중요한 신호로 간주합니다.

*   **키워드 활용**: 이미지의 내용과 관련된 자연스러운 키워드를 포함할 수 있습니다.
*   **과도한 키워드 스푸핑 금지**: 검색 순위를 조작하기 위해 관련성 없는 키워드를 나열하는 것은 검색 알고리즘에 의해 페널티를 받을 수 있으므로 주의해야 합니다.
*   **파일 이름과의 연계**: 이미지 파일 이름(`image.jpg` 등)도 검색 엔진이 참고하는 요소이므로, `alt` 텍스트와 일관된 의미를 가지도록 파일 이름을 관리하는 것이 좋습니다.

## 기술적 구현 예시

HTML5에서 이미지를 삽입할 때 `alt` 속성을 올바르게 사용하는 예시입니다.

```html
<!-- 정보성 이미지 예시 -->
<img src="product-shoe.jpg" 
     alt="검은색 가죽 운동화, 측면에서 본 모습" 
     width="300" 
     height="200">

<!-- 장식성 이미지 예시 -->
<img src="spacer.gif" 
     alt="" 
     role="presentation">

<!-- 링크용 이미지 예시 -->
<a href="/contact">
    <img src="contact-icon.png" 
         alt="고객센터 연락처 페이지로 이동">
</a>
```

## 관련 표준 및 도구

*   **WCAG 2.1 (Web Content Accessibility Guidelines)**: 웹 콘텐츠 접근성 지침의 1.1.1 Non-text Content 항목에서 이미지 대체 텍스트의 요구사항을 명시하고 있습니다.
*   **Lighthouse**: 구글의 웹 성능 및 접근성 분석 도구로, 이미지 `alt` 속성 누락 여부를 자동으로 검사하여 개선점을 제시합니다.
*   **WAVE(Web Accessibility Evaluation Tool)**: 웹 페이지의 접근성 오류를 시각적으로 확인하고 보고하는 도구입니다.

## 결론

Alt Text는 단순한 HTML 속성이 아닌, 모든 사용자가 웹 콘텐츠에 동등하게 접근할 수 있도록 하는 필수적인 요소입니다. 개발자와 디자이너는 이미지의 기능적 목적을 정확히 파악하여, 접근성과 SEO를 모두 고려한 적절한 대체 텍스트를 작성해야 합니다. 이는 기술적 완성도를 넘어 포용적인 웹 환경을 구축하는 윤리적 책임이기도 합니다.